<template>
  <div class="login">
    <div class="login-box">
      <div class="login-input">
        <h1>登 录</h1>
        <input type="text" v-model="loginForm.username" placeholder="用户名" />
        <br />
        <input
          type="password"
          v-model="loginForm.password"
          placeholder="密码"
        />
        <br />
        <button @click="login">Login</button>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      let _this = this;
      if (this.loginForm.username == "" || this.loginForm.password == "") {
        alert("用户名或密码不能为空");
      } else if (
        this.loginForm.username[0].charCodeAt() <= 57 &&
        this.loginForm.username[0].charCodeAt() >= 48
      ) {
        alert("用户名不能以数字开头");
      } else if (
        this.loginForm.username[0].charCodeAt() <= 90 &&
        this.loginForm.username[0].charCodeAt() >= 65
      ) {
        alert("用户名不能以大写字母开头");
      } else if (
        this.loginForm.username.length < 6 ||
        this.loginForm.username.length > 20
      ) {
        alert("用户名长度不低于6，不高于20");
      } else if (
        this.loginForm.password.length < 6 ||
        this.loginForm.password.length > 20
      ) {
        alert("密码长度不低于6，不高于20");
      } else {
        setTimeout(function() {
          alert("恭喜你，登录成功....");
        }, 1000);
        this.$router.push("/newmap");
      }
    },
  },
  name: "Login",
  components: {},
};
</script>

<style scoped>
.login {
  height: 100%;
  width: 100%;
  background-color: #333333;
}

.login-box {
  height: 300px;
  width: 400px;
  background-color: #cccccc;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login-input {
  margin: 10%;
  box-sizing: border-box;
}
h1 {
  text-align: center;
}
input {
  width: 100%;
  margin: 10px;
  box-sizing: border-box;
  height: 40px;
}
button {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  height: 40px;
  width: 60px;
}
</style>
